<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>潜客列表</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/iCheck/custom.css"/>
<style type="text/css">
.dataTables_info{font-size: 12px}
.dataTables_paginate{font-size: 12px;}
.searchCondition>div>a{margin-right: 20px;color: black;}
.searchCondition>div>a.cfoucs{color: #1ab394;font-weight: bold;}
table.dataTable thead .sorting:after{content: ""}
table.dataTable thead .sorting_desc:after{content: ""}
.caoZuo{font-size: 12px;margin: 0 4px;}
.highCondition{display: none;}
</style>
</head>
<body class="gray-bg">
<div class="container-fluid">
	<div style="padding: 10px;background-color: white;margin-top: 10px;">
		<div class="row searchCondition">
			<br/>
			<div class="col-sm-5 jfoucs" style="width:450px;height: 40px;padding-right:0;" id="starttimeOption">
				<span style="color: #bbb">最近微博发布时间：</span><a class="cfoucs" starttime="1">近1小时</a><a  starttime="3">近3小时</a><a starttime="5">近5小时</a><a starttime="24">近1天</a><a starttime="">自定义</a>
			</div>
			<div class="col-sm-3" style="padding: 0;height: 40px;" id="data_5">
				<div class="input-daterange input-group" id="datepicker">
		            <input type="text" class="input-sm form-control" name="start" value="2017-01-01" id="starttime">
		            <span class="input-group-addon" style="height: 24px;">到</span>
		            <input type="text" class="input-sm form-control" name="end" value="2017-12-31" id="endtime">
		        </div>
			</div>
			<div class="col-sm-offset-2 col-sm-2 text-right">
				<a style="color: #1ab394;" id="highCondition">更多搜索条件</a>
			</div>
			<div class="col-sm-12 jfoucs" style="height: 40px;" id="isMemberOption">
				<span style="color: #bbb">客户状态：</span><a class="cfoucs" isMember="">不限</a><a isMember="0">潜客</a><a isMember="1">会员</a>
			</div>
			<div class="col-sm-12 jfoucs" style="height: 40px;display: none;">
				<span style="color: #bbb">距离门店位置：</span><a class="cfoucs">不限</a><a>100米</a><a>300米</a><a>500米</a><a>1千米</a><a>3千米</a><a>自定义</a><input class="form-control" style="width: 80px;display: inline-block;">公里
			</div>
			<div class="col-sm-12 jfoucs highCondition" style="height: 40px;" id="repostsCountOption">
				<span style="color: #bbb">微博的转发数：</span><a class="cfoucs" repostsCount="">不限</a><a>自定义</a><input id="repostsCount" type="number" min="0" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" style="width: 80px;display: inline-block;">&nbsp;至&nbsp;<input id="repostsCount2" type="number" min="0" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" style="width: 80px;display: inline-block;">
			</div>
			<div class="col-sm-12 jfoucs highCondition" style="height: 40px;" id="commentsCountOption">
				<span style="color: #bbb">微博的评论数：</span><a class="cfoucs" commentsCount="">不限</a><a>自定义</a><input id="commentsCount" type="number" min="0" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" style="width: 80px;display: inline-block;">&nbsp;至&nbsp;<input id="commentsCount2" type="number" min="0" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" style="width: 80px;display: inline-block;">
			</div>
			<div class="col-sm-12 jfoucs highCondition" style="height: 40px;" id="attitudesCountOption">
				<span style="color: #bbb">微博的赞同数：</span><a class="cfoucs" attitudesCount="">不限</a><a>自定义</a><input id="attitudesCount" type="number" min="0" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" style="width: 80px;display: inline-block;">&nbsp;至&nbsp;<input id="attitudesCount2" type="number" min="0" onkeyup="this.value=this.value.replace(/\D/g,'')" class="form-control" style="width: 80px;display: inline-block;">
			</div>
			<div class="col-sm-12 jfoucs highCondition" style="height: 40px;" id="favoritedOption">
				<span style="color: #bbb">微博是否被收藏：</span><a class="cfoucs" favorited="">不限</a><a favorited="1">收藏</a><a favorited="0">未收藏</a>
			</div>
			<div class="col-sm-12 jfoucs highCondition" style="height: 40px;" id="statusRetweetedStatusTypeOption">
				<span style="color: #bbb">微博为转发微博：</span><a class="cfoucs" statusRetweetedStatusType="">不限</a><a statusRetweetedStatusType="1">是</a><a statusRetweetedStatusType="0">否</a>
			</div>
			&nbsp;<br/>
		</div>
	</div>
	<br/>
	<div style="background-color: white;padding: 10px;">
	   	<div class="row">
	   		<div class="col-sm-10">
	   			<div style="display: none;">
	   			门店选择
	   			<select class="form-control m-b" name="account" style="display: inline-block;width: 200px;">
	                      <option>选项 1</option>
	                      <option>选项 2</option>
	                      <option>选项 3</option>
	                      <option>选项 4</option>
	                  </select>
				</div>
	   		</div>
	   		<div class="col-sm-2 text-right">
	   			<button ctype="1" class="btn btn-sm btn-primary caoZuoAll" type="button">批量标记</button>
	   			<button ctype="3" class="btn btn-sm btn-white caoZuoAll" type="button" style="border-color: #18a689;">批量忽略</button>
	   		</div>
	   	</div>
   		<table id="myTable" class="display">
   			<thead>
   				<tr>
   					<th style="width:44px;">
   						<div class="checkbox i-checks">
                         <label><input id="checkedAll" type="checkbox"></label>
                     </div>
   					</th>
   					<th>用户</th>
   					<th style="width: 60px;">客户状态</th>
   					<th>距离门店位置</th>
   					<th>提及频率</th>
   					<th>最近发布时间</th>
   					<th>粉丝数/微博数</th>
   					<th>所属搜索组</th>
   					<th style="width: 160px;">操作</th>
   				</tr>
   			</thead>
   		</table>
	</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var myDataTable;
var customerIds = "";	//客户id组，逗号分隔

$(function(){
	init();
	
	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	
	$(".jfoucs a").click(function(){
		$(this).addClass("cfoucs").siblings().removeClass("cfoucs");
		func_dataTableReload();
	});
	$("#typeOption>li").click(function(){
		type = $(this).attr("type");
		func_dataTableReload();
	});
	
	$(document).on("click",".caoZuo",function(){
		var cType = $(this).attr("cType");
		var customerId = $(this).attr("customerId");
		var wbUserId = $(this).attr("wbUserId");
		if(cType == 2){	//对话框
			var chatDialog = dialog({
				id:	"chatDialog",
				fixed: true,
				padding: 0,
				width:1100,
				height:450,
				title:'客户平台管理',
				url:path+"/view/member/findPeople/chat?wbUserId="+wbUserId,
				cancelDisplay: false,
				cancel: function () {
					this.remove();
				}
			});
			chatDialog.showModal();
			$("iframe[name='chatDialog']:visible").attr("scrolling","auto").css("overflow-x","hidden").css("overflow-y","auto");
			
		}else{	//根据状态来更改
			$.post(path+"/scan/findPeople/updateType",{customerId:customerId,type:cType},function(data){
				func_dataTableReload()
			});
		}
	});
	
	$(document).on("click",".caoZuoAll",function(){
		var cType = $(this).attr("cType");
		if(customerIds != ""){
			$.each(customerIds.split(","),function(i,d){
				if(d != ""){
					$.post(path+"/scan/findPeople/updateType",{customerId:d,type:cType},function(data){
					});
				}
			});
			func_dataTableReload();
		}
	});
	
	$("#highCondition").click(function(){
		if($(this).text() == "更多搜索条件"){
			$(this).text("收起");
			$(".highCondition").show();
		}else{
			$(this).text("更多搜索条件");
			$(".highCondition").hide();
		}
		func_dataTableReload();
	});
	
	$(document).on('ifClicked',"#checkedAll",function(e){
		if(!e.currentTarget.checked){
			$('input').iCheck('check',function(){
				customerIds = "";
				$.each($("#myTable>tbody>tr"),function(){
					var a = $(this).find("td:eq(0) :checkbox").val();
					if(a != undefined){
						customerIds += "," + a;
					}
				});
			});			
		}else{
			$('input').iCheck('uncheck',function(){
				customerIds = "";
			});
		}
	});
	
	$(document).on('ifClicked',".childCheckbox",function(e){
		var a = $(this).val();
		if(!e.currentTarget.checked){
			customerIds += "," + a;
		}else{
			var str = customerIds;
			customerIds = "";
			$.each(str.split(","),function(i,d){
				if(d != "" && a != d){
					customerIds += "," + d;
				}
			});
		}
	});
	
	$("#data_5 .input-daterange").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0});
});

function init(){
	myDataTable = dataTable();
	
	myDataTable.on( 'draw', function () {
		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
		$('input').iCheck('uncheck');
		customerIds = "";
	});
}

function func_searchParam(jsonObject){
	var now = new Date();
	var starttime = $("#starttimeOption .cfoucs").attr("starttime");
	var endtime = now.Format("yyyy-MM-dd hh:mm:ss");
	if(starttime != ""){
		starttime = new Date(now.getTime()-starttime*60*60*1000).Format("yyyy-MM-dd hh:mm:ss");
	}else{
		starttime = $("#starttime").val()+" 00:00:00";
		endtime = $("#endtime").val()+" 23:59:59";
	}
	jsonObject.starttime = starttime;
	jsonObject.endtime = endtime;
	
	if($("#isMemberOption .cfoucs").attr("isMember") != ""){
		jsonObject.isMember = $("#isMemberOption .cfoucs").attr("isMember");
	}
	
	if($(".highCondition").is(":hidden")){
		return jsonObject;
	}
	
	if($("#repostsCountOption .cfoucs").attr("repostsCount") != ""){
		jsonObject.repostsCount = $("#repostsCount").val();
		jsonObject.repostsCount2 = $("#repostsCount2").val();
	}
	
	if($("#commentsCountOption .cfoucs").attr("commentsCount") != ""){
		jsonObject.commentsCount = $("#commentsCount").val();
		jsonObject.commentsCount2 = $("#commentsCount2").val();
	}
	
	if($("#attitudesCountOption .cfoucs").attr("attitudesCount") != ""){
		jsonObject.attitudesCount = $("#attitudesCount").val();
		jsonObject.attitudesCount2 = $("#attitudesCount2").val();
	}
	
	if($("#favoritedOption .cfoucs").attr("favorited") != ""){
		jsonObject.favorited = $("#favoritedOption .cfoucs").attr("favorited");
	}
	
	if($("#statusRetweetedStatusTypeOption .cfoucs").attr("statusRetweetedStatusType") != ""){
		jsonObject.statusRetweetedStatusType = $("#statusRetweetedStatusTypeOption .cfoucs").attr("statusRetweetedStatusType");
	}
}

function getUrlParam(key){
	var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
}

function func_dataTableReload(){
	if(func_valid()){
		myDataTable.ajax.reload();
	}
}

function func_AjaxUrl(){
	return path+"/scan/findPeople/getPage";
}

/**
 *	设置列名，对应后台
 */
function func_columns(){
	var jsonArr = [
		{"data":"id"},
		{"data":"user_screen_name"},
		{"data":"member_id"},
		{"data":"id"},
		{"data":"total"},
		{"data":"status_created_at"},
		{"data":"followers_statuses"},
		{"data":"rule_names"},
		{"data":"id"}
	];
	return jsonArr;
}

/**
 *	后台查询条件
 */
function func_ajaxData(){
	var jsonObject = new Object();
	func_searchParam(jsonObject);
	jsonObject.type2 = 2;
	return jsonObject;
}

function dataTable(){
	return $('#myTable').DataTable({
		processing: true,
		ordering: false,
		searching: false,
		info: true,
		autoWidth: true,
		lengthChange: false,
	    language: {
	    	emptyTable: '没有数据表',
	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
			infoEmpty: '没有数据',
			lengthMenu: '每页显示 _MENU_ 条记录',
			loadingRecords: '正在加载数据....',
			processing: '正在处理数据....',
			zeroRecords: '没有找到匹配的记录',
			paginate: {
				first: '首页',
				previous: '前页',
				next: '后页',
				last: '尾页'
			}
	    },
	    order: [[1,'desc']],
		pageLength: 10,
	    pagingType: 'full_numbers',
	    columnDefs: [{
			render: function(data, type, full) {
                return '<div class="checkbox i-checks"><label><input class="childCheckbox" type="checkbox" value="'+data+'"></label></div>';
            },
			targets: 0
		},{
			render: function(data, type, full) {
				var result = "";
				if(data == null){
					result = "潜客";
				}else{
					result = "会员";
				}
                return result;
            },
			targets: 2
		},{
			render: function(data, type, full) {
				var result = "";
				if(full.type != 2){
					result += '<button customerId="'+data+'" cType="3" class="btn btn-primary caoZuo" type="button">忽略</button>';
					result += '<button customerId="'+data+'" cType="1" class="btn btn-primary caoZuo" type="button">标记</button>';
				}
				result += '<button wbUserId="'+full.user_id+'" customerId="'+data+'" cType="2" class="btn btn-primary caoZuo" type="button">回复</button>';
                return result;
            },
			targets: 8
		}],
	    columns: func_columns(),
	    serverSide: true,
	    ajax: {
	    	contentType: 'text/plain;charset=utf-8',
	    	type: 'POST',
	    	url: func_AjaxUrl(),
	    	data: function(d){
				d.extra_search = func_ajaxData();
				return JSON.stringify(d);
			}
		}
	});
}

//验证
function func_valid(){
	if($(".highCondition").is(":visible")){
		//转发数
		var value1 = $("#repostsCount").val();
		var value2 = $("#repostsCount2").val();
		if($("#repostsCountOption>a:last").hasClass("cfoucs") && value1!='' && value2!=''){
			value1 = parseInt(value1);
			value2 = parseInt(value2);
			if(value1 > value2){
				var d = dialog({
					align: 'right',
					content: '第二个值应比第一个值大'
				}).show($("#repostsCount2")[0]);
				setTimeout(function () {
					d.close().remove();
				}, 1600);
				return false;
			}
		}
		
		//评论数
		value1 = $("#commentsCount").val();
		value2 = $("#commentsCount2").val();
		if($("#commentsCountOption>a:last").hasClass("cfoucs") && value1!='' && value2!=''){
			value1 = parseInt(value1);
			value2 = parseInt(value2);
			if(value1 > value2){
				var d = dialog({
					align: 'right',
					content: '第二个值应比第一个值大'
				}).show($("#commentsCount2")[0]);
				setTimeout(function () {
					d.close().remove();
				}, 1600);
				return false;
			}
		}
		
		//评论数
		value1 = $("#attitudesCount").val();
		value2 = $("#attitudesCount2").val();
		if($("#attitudesCountOption>a:last").hasClass("cfoucs") && value1!='' && value2!=''){
			value1 = parseInt(value1);
			value2 = parseInt(value2);
			if(value1 > value2){
				var d = dialog({
					align: 'right',
					content: '第二个值应比第一个值大'
				}).show($("#attitudesCount2")[0]);
				setTimeout(function () {
					d.close().remove();
				}, 1600);
				return false;
			}
		}
	}
	
	return true;
}

Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
</script>
</html>